/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableWithoutFeedback,
    Modal
} from 'react-native';

import {
    FormStatus,
    SubmitBtn
} from './Form'

let self = null;

export default class BottomPopupModal extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        title: React.PropTypes.string,
        btnText: React.PropTypes.string,
        btnOnPress: React.PropTypes.func,
        visible: React.PropTypes.bool
    }

    static defaultProps = {
        visible: false,
    }


    constructor(prop) {
        super(prop);
        this.state = {}
    }

    render() {
        return (
            <Modal onRequestClose={()=>{}} animationType={'fade'} transparent={true} visible={this.props.visible}>
                <View style={[base.clientWH, styles.bg]}>
                    <View style={[base.columnCC, styles.container, this.props.style]}>
                        {
                            this.props.title ?
                                <View style={[base.rowCC, styles.titleBox]}>
                                    <Text allowFontScaling={false} style={styles.title}>{this.props.title}</Text>
                                </View> :
                                <View/>
                        }
                        <View style={styles.childrenBox}>
                            {
                                this.props.children
                            }
                        </View>
                        {
                            this.props.btnText ?
                                <View style={styles.btnBox}>
                                    <SubmitBtn
                                        control={FormStatus.READY}
                                        style={styles.btn}
                                        onPress={() => this.props.btnOnPress()}
                                        text={this.props.btnText}/>
                                </View> :
                                <View/>
                        }
                    </View>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    bg: {
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.6)'
    },
    container: {
        width: layout.MAX_WIDTH,
        backgroundColor: '#fff'
    },
    titleBox: {
        alignSelf: 'stretch',
        paddingVertical: layout.height(32),
        borderBottomColor: layout.MAIN_BORDER_COLOR,
        borderBottomWidth: layout.LINE_WIDTH
    },
    title: {
        fontSize: layout.font(32),
        color: layout.MAIN_COLOR
    },
    childrenBox: {
        alignSelf: 'stretch',
    },
    btnBox: {
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_SMALL,
        paddingVertical: layout.GAP_VERTICAL_SMALL
    },
    btn: {
        marginTop: 0,
        height: layout.height(90)
    },
})